<script>
import border from "@/views/formShortLink/border/index.vue";
import {addPersonJob} from "@/api/group";

export default {
  props: ['collaId'],
  components: {border},
  data() {

    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);

    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    return {
      taskTitle: '',      // 任务标题
      taskContent: '',    // 任务内容
      startTime: formatDate(today),
      endTime: formatDate(tomorrow),    // 结束时间
    }
  },
  methods: {
    // 下发任务方法
    submitTask() {
// 非空验证
      if (!this.taskTitle.trim()) {
        this.$message.warning('请输入任务标题');
        return;
      }

      if (!this.taskContent.trim()) {
        this.$message.warning('请输入任务内容');
        return;
      }

      // 时间非空验证
      if (!this.startTime) {
        this.$message.warning('请选择开始时间');
        return;
      }

      if (!this.endTime) {
        this.$message.warning('请选择结束时间');
        return;
      }

      // 开始时间不能晚于结束时间验证
      const startDateTime = new Date(this.startTime).getTime();
      const endDateTime = new Date(this.endTime).getTime();

      if (startDateTime > endDateTime) {
        this.$message.warning('开始时间不能晚于结束时间');
        return;
      }

      const startTimeStamp = this.startTime ? startDateTime : '';
      const endTimeStamp = this.endTime ? endDateTime : '';

      const taskData = {
        type: "个人任务",
        resourcesId: "resource123",
        begindate: startTimeStamp,
        enddate : endTimeStamp,
        jobUserId: this.collaId,
        text: this.taskTitle,
        executionDate: endTimeStamp,
        jobinfo: JSON.stringify({
          option1: {
            notes: this.taskTitle || "任务标题",  // 使用任务标题
            body: this.taskContent || "任务内容",  // 使用任务内容
            value: "",
            isphoto: ""
          }
        }),
        instantperson: 0
      };
      console.log('下发任务:', taskData);

      addPersonJob(taskData).then(res => {
        if (res.code === 200){
          this.$message.success('任务下发成功')
          this.$emit('close');
        }else {
          this.$message.error('任务下发失败')
        }
        console.log('任务下发成功:', res);
      }).catch(err => {
        console.log('任务下发失败:', err);
      });
      // 这里可以添加实际的任务提交逻辑
    }
  }
}
</script>

<template>
  <border title="任务" :close="true" w="350px" h="380px" @close="$emit('close')" x="630px" y="30%">
    <div class="collaborPage">
      <!-- 任务标题输入框 -->
      <el-input
        v-model="taskTitle"
        placeholder="任务标题"
        clearable>
      </el-input>

      <!-- 任务内容文本域 -->
      <el-input
        v-model="taskContent"
        type="textarea"
        style="margin-top: 10px"
        :rows="6"
        placeholder="任务内容"
        resize="none">
      </el-input>

      <!-- 时间选择器 -->
      <div class="time" style="margin-top: 10px">
        <el-date-picker
          v-model="startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>

        <el-date-picker
          v-model="endTime"
          type="datetime"
          placeholder="选择结束时间"
          style="margin-top: 10px"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>

      <!-- 操作按钮 -->
      <div style="display:flex;flex-direction: row;justify-content: flex-end;
    position:absolute;bottom: 10px;right: 10px">
        <el-button type="primary" @click="submitTask">下发任务</el-button>
      </div>
    </div>
  </border>
</template>

<style scoped lang="scss">
.collaborPage {
  display: flex;
  flex-direction: column;
  padding: 10px;

  .plist {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 190px;
    background-color: #F8FBFD;

    .listDiv {
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow: auto;
      height: calc(100% - 25px);

      .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5px;

        .item {
          display: flex;
          flex-direction: row;
          align-items: center;

          i {
            font-size: 18px;
          }
        }
      }

      .row:hover {
        background-color: #EEEEEE;
      }
    }

    .msgs {
      display: flex;
      flex-direction: column;
      background-color: #fffdf0;
      text-align: left;
      padding: 5px 0;
      padding-left: 15px;
      cursor: pointer;
      color: #faa658;
      border: 1px solid #faa658;
    }
  }
}
</style>
